<template>
  <div class="">
    <div>
      <div class="containercontent">
        <div class="separateTable">
          <div class="penalrow selectw100">
              <!-- <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  仪器类型
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-select v-model="eqTypeArrValue" placeholder="请选择" size="mini">
                      <el-option
                        v-for="item in eqTypeArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </div>
              </div>
              <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  仪器种类
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-select v-model="mainEquipTypeValue" placeholder="请选择" size="mini">
                      <el-option
                        v-for="item in mainEquipType"
                        :key="item.mainEquipTypeID"
                        :label="item.mainEquipTypeName"
                        :value="item.mainEquipTypeID">
                      </el-option>
                    </el-select>
                </div>
              </div> -->
              <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  仪器名
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                  <el-input style="" v-model="searchName" size="mini" placeholder="下拉选择、输入筛选仪器"></el-input>
                </div>
              </div>
              <div class="basicRightDistanceA" style="position:absolute;">
                <el-button type="primary" size="mini">搜索</el-button>
                <!-- <el-button type="primary" size="mini" @click="showEqDetail('main','new','mostBasic')">添加主仪器</el-button> -->
              </div>
          </div>
          <!-- <div class="penalrow selectw100">
              <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">
                  仪器状态
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-select size="mini" v-model="enableStatusValue">
                      <el-option
                        v-for="item in enableStatus"
                        v-if="item.value!='-1'"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                  </el-select>
                </div>
              </div>
              
          </div> -->
          <!-- <div class="separaterow">
            <el-table
                :data="mainEquipTableData"
                style="width: 100%"
                :height="tableHeightB"
                size="mini"
                border
                highlight-current-row
                @current-change="handleCurrentChangeMain"
                >
                <el-table-column
                  label="序号"
                  min-width="50px"
                  >
                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>  
                </el-table-column>
                <el-table-column
                  property="mainEquipName"
                  label="仪器名"
                  min-width="100px">
                </el-table-column>
                <el-table-column
                  property="mainEquipNum"
                  label="仪器型号"
                  min-width="100px">
                </el-table-column>
                <el-table-column
                  property="mainEquipSpecificationModel"
                  label="仪器编号"
                  min-width="100px">
                </el-table-column>
                <el-table-column
                  label="操作"
                  min-width="100px">
                  <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="showEqDetail('main','look','weihu')">详情</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <div class="block changepages">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
          </div> -->
          <div style="margin-top:20px;position:absolute;left:0;right: 0;">
              <instrument-detail :eqType="eqType" :eqEditOrNew="eqEditOrNew" :detailType="eqDetailShowType"></instrument-detail>
          </div>
          
        </div>
      </div>
    </div>
    <div v-if="eqDetailShow">
      <instrument-detail :eqType="eqType" :eqEditOrNew="eqEditOrNew" :detailType="eqDetailShowType"></instrument-detail>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'
const instrumentDetail = () => import('./children/instrumentDetail.vue');

export default {
  data () {
    let that = this;
    return {
      enableStatusValue:'3',
      methodCategoryValue:'',
      methodTypeValue:'',
      searchName:'',
      sampleTypeValue:'',
      currentPage:1,
      frontEquipTypeValue:'',
      mainEquipTypeValue:'',
      //主仪器列表选中行
      currentRowMain:null,
      //辅助仪器列表选中行
      currentRowFront:null,
      eqDetailShow:false,
      //表示仪器详细信息显示权限
      eqDetailShowType:'weihu',
      //仪器详情中，是主仪器还是辅助仪器
      eqType:'main',
      //仪器详情中，是新增仪器还是编辑仪器
      eqEditOrNew:'look',
    }
  },
  computed: {
    ...mapState(['enableStatus','tableHeightB','mainEquipType','frontEquipType','mainEquipTableData','frontEquipTableData']),
  },
  mounted(){
    
  },
  watch:{

  },
  components:{
    instrumentDetail,
  },
  methods:{
    editMaintEquipe:function(row){

    },
    editFrontEquip:function(row){

    },
    changeFrontEquipStatus:function(row){
      console.log(row);
    },
    handleCurrentChangeMain:function(val){
      this.currentRowMain = val;
    },
    handleCurrentChangeFront:function(val){
      this.currentRowFront = val;
    },
    changeMainEquipStatus:function(row){
      console.log(row);
    },
    handleSizeChange:function(){

    },
    handleCurrentChange:function(){

    },
    showEqDetail:function(type,edornew,detailType){
      this.eqType=type;
      this.eqDetailShow=true;
      this.eqEditOrNew=edornew;
      this.eqDetailShowType = detailType;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.infoitem{
  width:calc((100% - 200px)/4);
}*/
/*.infoitem:nth-child(1){
  width: 110px;
}*/
.separaterow{
  margin-top: 10px;
}
.informationItem {
    width: calc(100% - 70px);
    float: right;
}
</style>
